<template>
    <div>
        <!--国潮-->
        <div class="national">
            <!--<img src="../assets/img/0FB.png" alt="">-->
            <span>Maxsoo国潮</span>
        </div>
        <div class="substance">
            <div v-for="(item,index) in 4" :key="index">
                <img src="../assets/img/0FB.png" alt="">
                <div>全部服饰</div>
            </div>
        </div>
        <!--精选-->
        <div class="selected">
            <div>
                <img src="../assets/img/logo-02.png" alt="">
                <span>精选</span>
            </div>
            <div class="substance1">
                <div v-for="(item,index) in 4" :key="index">
                    <img src="../assets/img/0FB.png" alt="">
                    <div class="substance1-text1">全部服饰</div>
                    <div class="substance1-text2">迷人仙气难以抵挡</div>
                </div>
            </div>
            <div>
                <img src="../assets/img/0FB.png" alt="">
            </div>
        </div>
        <!--推荐-->
        <div class="recommend">
            <div>
                <span></span>
                <span>超难入手的鞋都在Maxsoo</span>
            </div>
            <div>
                <div v-for="(item,index) in 4" :key="index">
                    <div>
                        <img src="../assets/img/0FB.png" alt="">
                        <span class="iconfont icon-zan1-copy"></span>
                    </div>
                    <div>VERSACE</div>
                    <div>UNNU 泡泡袖连衣裙</div>
                    <div>￥8, 000</div>
                </div>
            </div>
        </div>
        <!--图片-->
        <div class="item-img">
            <img src="../assets/img/0FB.png" alt="">
        </div>

        <!--推荐-->
        <div class="recommend">
            <div>
                <span></span>
                <span>超难入手的鞋都在Maxsoo</span>
            </div>
            <div>
                <div v-for="(item,index) in 4" :key="index">
                    <div>
                        <img src="../assets/img/0FB.png" alt="">
                        <span class="iconfont icon-zan1-copy"></span>
                    </div>
                    <div>VERSACE</div>
                    <div>UNNU 泡泡袖连衣裙</div>
                    <div>￥8, 000</div>
                </div>
            </div>
        </div>
        <!--轮播-->
        <div class="lbtu">
            <el-carousel :interval="4000" type="card" height="594px">
                <el-carousel-item v-for="item in 6" :key="item">
                <h3 class="medium">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
            <div class="lbtu-text1">Maxsoo箱包、配饰华丽出现</div>
            <div class="lbtu-text2">华美印花、简单打包、精品手提包让你爱不释手</div>
        </div>

        <!--推荐-->
        <div class="recommend">
            <div>
                <span></span>
                <span>超难入手的鞋都在Maxsoo</span>
            </div>
            <div>
                <div v-for="(item,index) in 4" :key="index">
                    <div>
                        <img src="../assets/img/0FB.png" alt="">
                        <span class="iconfont icon-zan1-copy"></span>
                    </div>
                    <div>VERSACE</div>
                    <div>UNNU 泡泡袖连衣裙</div>
                    <div>￥8, 000</div>
                </div>
            </div>
        </div>
        <div class="infinity">From Zero To Infinity</div>
        <div class="totop">
            <div @click="totop">
                <span class="iconfont icon-shang1"></span>
                <div>回到顶部</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        totop() {
            var timer = setInterval(()=>{
                document.documentElement.scrollTop = document.documentElement.scrollTop-50
                if(document.documentElement.scrollTop==0){
                    clearInterval(timer); 
                }
            },50)
        }
    },
}
</script>

<style lang="scss">
.national {
    margin-top: 46px;
    width: 100%;
    height: 560px;
    position: relative;
    background: #ccc;
    >img {
        width: 100%;
        height: 100%;
        vertical-align: top;
    }
    >span {
        font-size: 28px;
        font-weight: 600;
        position: absolute;
        bottom: 63px;
        left: 50%;
        margin-left: -84px;
    }
}
.substance {
    width: 1200px;
    margin-top: 66px;
    display: flex;
    flex-wrap: wrap-reverse;
    >div {
        width: 565px;
        // background: #ccc;
        height: 641px;
        >img {
            width: 100%;
            height: 541px;
        }
        >div {
            font-size: 28px;
            padding: 20px 0 0 0;
        }
    }
}
.substance1 {
    width: 1200px;
    margin-top: 66px;
    display: flex;
    flex-wrap: wrap-reverse;
    >div {
        width: 565px;
        // background: #ccc;
        height: 701px;
        >img {
            width: 100%;
            height: 541px;
        }
        >.substance1-text1 {
            font-size: 28px;
            padding: 20px 0 0 0;
            text-align: center;
        }
        >.substance1-text2 {
            font-size: 24px;
            color: #C5C5C5;
            text-align: center;
        }
    }
}
.selected {
    padding-top: 50px;
    >div:nth-child(1) {
       width: 327px;
       position: relative;
        >img {
            width: 231px;
            height: 50px;
            vertical-align: top;
        }
        >span {
            font-size: 48px;
            line-height: 50px;
            position: absolute;
            right: 0px;
            bottom: 2px;
        }
    }
    >div:nth-child(3) {
        width: 1180px;
        >img {
            width: 100%;
            height: 564px;
            vertical-align: top;
        }
    }
}
.recommend {
    margin-top: 68px;
    >div:nth-child(1) {
        text-align: center;
        position: relative;
        >span:nth-child(1) {
            display: inline-block;
            width: 160px;
            height: 18px;
            background: #f3f3f3;
            position: absolute;
            bottom: -4px;
            left: 50%;
            margin-left: -80px;
            z-index: -1;
        }
        >span:nth-child(2) {
            font-size: 18px;

        }
    }
    >div:nth-child(2) {
        margin-top: 95px;
        width: 1123px;
        display: flex;
        >div {
            width: 260px;
            text-align: center;
            >div:nth-child(1) {
                width: 260px;
                height: 260px;
                position: relative;
                >img {
                    width: 100%;
                    height: 100%;
                    vertical-align: top;
                }
                >span {
                    font-size: 18px;
                    color: #c6c6c6;
                    position: absolute;
                    top: 5px;
                    right: 2px;
                }
            }
            >div:nth-child(2) {
                font-size: 14px;
                font-weight: 600;
                margin-top: 25px;
            }
            >div:nth-child(3) {
                font-size: 14px;
                margin-top: 17px;
            }
            >div:nth-child(4) {
                font-size: 14px;
                margin-top: 23px;
            }
        }
    }
}
.lbtu {
    width: 1178px;
    // height: 594px;
    margin-top: 153px;
    >.lbtu-text1 {
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        margin-top: 26px;
    }
    >.lbtu-text2 {
        font-size: 14px;
        text-align: center;
        margin-top: 28px;
    }
}
.item-img {
    width: 1112px;
    height: 560px;
    margin-top: 70px;
    >img {
        width: 100%;
        height: 100%;
        vertical-align: top;
    }
}
.infinity {
    font-size: 28px;
    color: #F8C301;
    text-align: center;
    margin-top: 84px;
}
.totop {
    padding-bottom: 95px;
    margin-top: 28px;
    >div {
        text-align: center;
        width: 64px;
        cursor: pointer;
        >span {
            font-size: 28px;
        }
        >div {
            font-size: 16px;
        }
    }
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 466px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
.el-carousel__indicators--outside {
    display: none;
}
</style>